<template>
	<div>
		<mj-title type="h2" title="Transfer 穿梭框"></mj-title>
		<div class="page-desc">双栏穿梭选择框，常用于将多个项目从一边移动到另一边。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
			    <p class="mb5">右边选项的值：{{value}}</p>
			    <p><mj-transfer :data="data" v-model="value"/></p>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					  &lt;mj-transfer :data="data2" v-model="value2"/>
					&lt;/template>
					&lt;script>
					 export default {
					   data(){
					     return {
					       value2:[1],
					       data2:[
					         {
					           value: 1,
					           name: '选项1'
					         },
					         {
					            value: 2,
					            name: '选项2'
					         }
					       ]
					     }
					   }
					 }
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="使用v-model设置初始选项"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
			    <p class="mb5">右边选项的值：{{value2}}</p>
			    <p><mj-transfer :data="data2" v-model="value2"/></p>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					    &lt;mj-transfer :data="data2" v-model="value2"/>
					&lt;/template>
					&lt;script>
					 export default {
					   data(){
					     return {
					       value2:[1],
					       data2:[
					         {
					           value: 1,
					           name: '选项1'
					         },
					         {
					            value: 2,
					            name: '选项2'
					         }
					       ]
					     }
					   }
					 }
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="使用getValue取值"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
			    <p><mj-transfer :data="data3" ref="transfer" :titles="['候选项','已选项']" :btnText="['向右','向左']"/></p>
			    <mj-button type="primary" @click="getValue" class="mt10">取值（控制面板输出）</mj-button>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					  &lt;div>
					    &lt;p>&lt;mj-transfer :data="data3" ref="transfer" :titles="['候选项','已选项']" :btnText="['向右','向左']"/>&lt;/p>
					    &lt;mj-button @click="getValue">取值（控制面板输出）&lt;/mj-button>
					  &lt;/div>
					&lt;/template>
					&lt;script>
					export default {
						data(){
							return {
								data3:[
								{
									value: 1,
									name: '默认选中',
									checked:true
								},
								{
									value: 2,
									name: '禁用项',
									disabled:true
								},
								{
									value: 3,
									name: '禁用且选中项',
									disabled:true,
									checked:true
								},
								{
									value: 4,
									name: '正常项'
								},
								],
							}
						}
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Transfer 参数"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>data</td>
					<td>数据源</td>
					<td>Array</td>
					<td>[]</td>
				</tr>
				<tr>
					<td>value</td>
					<td>右边项的value集合</td>
					<td>Array</td>
					<td>[]</td>
				</tr>
				<tr>
					<td>titles</td>
					<td>列表标题文本</td>
					<td>Array</td>
					<td>-</td>
				</tr>
				<tr>
					<td>btnText</td>
					<td>方向控制文本</td>
					<td>Array</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Transfer data参数"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>name</td>
					<td>显示的名称</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>value</td>
					<td>选项对应唯一值</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>disabled</td>
					<td>禁用</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>checked</td>
					<td>已选择，如果使用了v-model时，此项无效</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Transfer 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>返回值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>change</td>
					<td>切换事件，带3个参数（方向,leftValue,rightValue）</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
  data () {
    return {
      value: [],
      data: [
        {
          value: 1,
          name: '选项1'
        },
        {
          value: '2',
          name: '选项2'
        }
      ],
      value2: [1],
      data2: [
        {
          value: 1,
          name: '选项1'
        },
        {
          value: 2,
          name: '选项2'
        }
      ],
      data3: [
        {
          value: 1,
          name: '默认选中',
          checked: true
        },
        {
          value: 2,
          name: '禁用项',
          disabled: true
        },
        {
          value: 3,
          name: '禁用且选中项',
          disabled: true,
          checked: true
        },
        {
          value: 4,
          name: '正常项'
        },
        {
          value: 5,
          name: '正常项2'
        }
      ]
    }
  },
	methods:{
	    getValue () {
	      const v = this.$refs.transfer.getValue()
	      console.log(v)
	    }

	}
}
</script>